<template>
  <view class="xinguanvaccin">
    <view class="xinguan-flex">
      <text>姓名</text>
      <input placeholder="请输入姓名" placeholder-class="input-style" v-model="obj.name"/>
    </view>
    <view class="xinguan-flex">
      <text>身份证</text>
      <input placeholder="请输入身份证" placeholder-class="input-style" v-model="obj.id_card"/>
    </view>
    <view class="xinguan-flex">
      <text>手机号</text>
      <input placeholder="请输入手机号" type="number" placeholder-class="input-style" v-model="obj.phone"/>
    </view>
    <view class="xinguan-flex">
      <text>现居地址</text>
      <picker mode="region" class="flex-left" @change="dizhi">
        <view>
          <text>{{ obj.address === '' ? '请选择现居住地址' : obj.address }}</text>
          <image src="/static/other/gengduo.svg"></image>
        </view>
      </picker>
    </view>
    <view class="xinguan-flex">
      <text>现居详细地址</text>
      <input placeholder="请输入现居详细地址" placeholder-class="input-style" v-model="obj.de_address"/>
    </view>
    <!-- 疫苗人群分类 -->
    <view class="xinguan-flex">
      <text>疫苗人群分类</text>
      <picker mode="selector" class="flex-left" :range="crowddata" @change="getcrowdsort">
        <view>
          <text>{{ obj.crowd_sort === "" ? '请选择疫苗人群分类' : obj.crowd_sort }}</text>
          <image src="/static/other/gengduo.svg"></image>
        </view>
      </picker>
    </view>
    <!-- 预约时间 -->
    <view>
      <!-- 医院地址 -->
      <view class="reserve-address">
        <text class="reserve-name">{{ newapptimelist.Hospital }}</text>
        <text class="reserve-road">{{ newapptimelist.address }}</text>
        <view class="reserve-title">
          <text v-for="(item,index) in newapptimelist.company" :key="index">{{ item }}</text>
        </view>
      </view>
      <!-- 星期 -->
      <view class="Week">
        <view class="Week-flex">
          <view class="Week-style Week-sup" :class="index===dayshow?'checkstyle':''"
                v-for="(item,index) in newapptimelist.week" :key="index" @click="getdate(item,index)">
            <text>{{ item.day }}</text>
            <text>{{ item.date }}</text>
            <text>{{ item.Have }}</text>
          </view>
        </view>
      </view>
      <!-- 时段 -->
      <view class="period-view" v-for="(item,index) in newapptimelist.lasting" :key="index">
        <text class="period-title">{{ item.period }}</text>
        <view class="Week-flex">
          <block>
            <view class="Week-style Week-Down" :class="index+'-'+key===timeshow?'checkstyle':''" @click="add(index,key)"
                  v-for="(it,key) in item.time" :key="key"
                  style="font-size: 14px">
              <text>{{ it.start_time }}-{{ it.end_time }}</text>
              <text>剩余{{ it.over }}</text>
            </view>
          </block>
        </view>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view style="height:300rpx"></view>
    <view class="submit">
      <text @click="go">取消</text>
      <text @click="submit">提交预约</text>
    </view>
  </view>
</template>

<script>
import {newapptime, rescovid} from "../../utils/API/homeapi";

export default {
  data() {
    return {
      crowddata: ['医疗卫生人员', '卫生系统内工作的其他人员', '因公出国人员',
        '对外劳务派遣人员', '留学生', '因私出国人员', '海关边检人员', '公安系统,消防人员',
        '党政机关,事业单位人员', '社区工作者', '教育工作者', '小学和中学学生', '其他人员'
      ],
      newapptimelist: [],
      dayshow: null,
      timeshow: null,
      //  表单
      obj: {
        name: '',
        id_card: '',
        phone: '',
        address: '',
        de_address: "",
        crowd_sort: '',
        date: '',
        period: '',
        reserve_time: '',
        when: 0
      }
    };
  },
  mounted() {
    this.xuan()
  },
  methods: {
    async xuan() {
      let {data} = await newapptime()
      this.newapptimelist = data[0]
    },
    add(k1, k2) {
      this.timeshow = k1 + '-' + k2;
      this.obj.period = this.newapptimelist.lasting[k1].period;
      this.obj.reserve_time = this.newapptimelist.lasting[k1].time[k2].start_time + '-' + this.newapptimelist.lasting[k1].time[k2].end_time
    },
    //  地址
    dizhi(e) {
      this.obj.address = e.detail.value.join(' ')
    },
    //  人群
    getcrowdsort(e) {
      this.obj.crowd_sort = this.crowddata[e.detail.value]
      console.log(this.obj.crowd_sort)
    },
    //  日期
    getdate(item, index) {
      this.dayshow = index;
      this.obj.date = item.date
      console.log(this.obj.date)
    },
    //  提交
    async submit() {
      let data = await rescovid(this.obj)
      if (data.msg === "提交成功") {
        wx.showToast({
          title: data.msg,
          icon: 'success',
          duration: 2000
        })
        wx.navigateTo({
          url:'/pages/vaccineorder/vaccineorder'
        })
      } else {
        return wx.showToast({
          title: data.msg,
          icon: 'error',
          duration: 2000
        })
      }
    },
    go() {
      wx.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss">
@import "../../static/common-style/form.css";
@import "../../static/common-style/vaccine.css";

page {
  background-color: #f7f7f7;
}

/* 预约地址 */
.reserve-address {
  background-color: #ffffff;
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 10rpx;
}

.reserve-address text {
  display: block;
}

.reserve-name {
  font-weight: bold;
}

.reserve-road {
  padding: 20rpx 0;
}

.reserve-title {
  display: flex;
  align-items: center;
}

.reserve-title text {
  background-color: #f7f7f7;
  padding: 5rpx 20rpx;
  font-size: 25rpx;
  margin-right: 10rpx;
}

.Week {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 20rpx;
  display: flex;
  align-items: center;
}

.Week-flex {
  display: flex;
}

.Week-style {
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.Week-style text {
  padding: 3rpx;
}

.Week-sup {
  width: 150rpx;
}

.period-view {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 20rpx;
}

.period-title {
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.Week-Down {
  width: 200rpx;
}

/* 选中加上样式 */
.checkstyle {
  background-color: #2c76ef !important;
  color: #ffffff !important;
}
</style>
